/**
 * 企业成员详情模态框组件
 */

'use client';

import React from 'react';
import {
  Modal,
  Descriptions,
  Avatar,
  Tag,
  Space,
  Typography,
  Divider,
  Button,
  Tooltip,
} from 'antd';
import {
  UserOutlined,
  MailOutlined,
  PhoneOutlined,
  TeamOutlined,
  CrownOutlined,
  ClockCircleOutlined,
  EditOutlined,
  DeleteOutlined,
} from '@ant-design/icons';
import type { Member } from '../types/member';
import { formatDate } from '../utils/date';

const { Text, Title } = Typography;

interface MemberDetailModalProps {
  member: Member | null;
  visible: boolean;
  onClose: () => void;
  onEdit?: (member: Member) => void;
  onDelete?: (member: Member) => void;
}

export default function MemberDetailModal({
  member,
  visible,
  onClose,
  onEdit,
  onDelete,
}: MemberDetailModalProps) {
  if (!member) return null;

  const getStatusTag = (status: string) => {
    const statusMap: Record<string, { color: string; text: string }> = {
      active: { color: 'green', text: '激活' },
      inactive: { color: 'red', text: '未激活' },
      pending: { color: 'orange', text: '待激活' },
    };
    const config = statusMap[status] || { color: 'default', text: status };
    return <Tag color={config.color}>{config.text}</Tag>;
  };

  const getRoleTag = (role: string, isAdmin: boolean) => {
    if (isAdmin) {
      return (
        <Tag color="red" icon={<CrownOutlined />}>
          管理员
        </Tag>
      );
    }
    return <Tag color="blue">{role || '普通成员'}</Tag>;
  };

  return (
    <Modal
      title={
        <Space>
          <Avatar
            size={32}
            src={member.avatar}
            icon={<UserOutlined />}
            style={{ backgroundColor: member.avatar ? undefined : '#1890ff' }}
          />
          <span>成员详情</span>
          {member.is_admin && (
            <CrownOutlined style={{ color: '#ff4d4f' }} title="管理员" />
          )}
        </Space>
      }
      open={visible}
      onCancel={onClose}
      width={800}
      footer={[
        <Button key="close" onClick={onClose}>
          关闭
        </Button>,
        <Button
          key="edit"
          type="primary"
          icon={<EditOutlined />}
          onClick={() => onEdit?.(member)}
        >
          编辑成员
        </Button>,
        <Button
          key="delete"
          danger
          icon={<DeleteOutlined />}
          onClick={() => onDelete?.(member)}
        >
          删除成员
        </Button>,
      ]}
    >
      <div style={{ padding: '16px 0' }}>
        {/* 基本信息 */}
        <Title level={5}>基本信息</Title>
        <Descriptions column={2} bordered size="small">
          <Descriptions.Item label="用户名" span={1}>
            <Text code>{member.name}</Text>
          </Descriptions.Item>
          <Descriptions.Item label="显示名称" span={1}>
            <Text strong>{member.display_name}</Text>
          </Descriptions.Item>
          <Descriptions.Item label="状态" span={1}>
            {getStatusTag(member.status)}
          </Descriptions.Item>
          <Descriptions.Item label="角色权限" span={1}>
            <Space>
              {getRoleTag(member.role || '', member.is_admin || false)}
              {member.is_owner && (
                <Tag color="purple" icon={<CrownOutlined />}>
                  所有者
                </Tag>
              )}
            </Space>
          </Descriptions.Item>
          <Descriptions.Item label="部门" span={1}>
            {member.department ? (
              <Tag icon={<TeamOutlined />} color="default">
                {member.department}
              </Tag>
            ) : (
              <Text type="secondary">未设置</Text>
            )}
          </Descriptions.Item>
          <Descriptions.Item label="职位" span={1}>
            {member.position || <Text type="secondary">未设置</Text>}
          </Descriptions.Item>
        </Descriptions>

        <Divider />

        {/* 联系信息 */}
        <Title level={5}>联系信息</Title>
        <Descriptions column={1} bordered size="small">
          <Descriptions.Item label="邮箱">
            {member.email ? (
              <Space>
                <MailOutlined style={{ color: '#1890ff' }} />
                <Text copyable>{member.email}</Text>
              </Space>
            ) : (
              <Text type="secondary">未设置</Text>
            )}
          </Descriptions.Item>
          <Descriptions.Item label="电话">
            {member.phone ? (
              <Space>
                <PhoneOutlined style={{ color: '#52c41a' }} />
                <Text copyable>{member.phone}</Text>
              </Space>
            ) : (
              <Text type="secondary">未设置</Text>
            )}
          </Descriptions.Item>
        </Descriptions>

        <Divider />

        {/* 时间信息 */}
        <Title level={5}>时间信息</Title>
        <Descriptions column={1} bordered size="small">
          <Descriptions.Item label="创建时间">
            <Space>
              <ClockCircleOutlined style={{ color: '#666' }} />
              <Text>
                {member.created_at
                  ? formatDate(new Date(member.created_at * 1000))
                  : '未知'}
              </Text>
            </Space>
          </Descriptions.Item>
          <Descriptions.Item label="更新时间">
            <Space>
              <ClockCircleOutlined style={{ color: '#666' }} />
              <Text>
                {member.updated_at
                  ? formatDate(new Date(member.updated_at * 1000))
                  : '未知'}
              </Text>
            </Space>
          </Descriptions.Item>
          <Descriptions.Item label="最后登录">
            <Space>
              <ClockCircleOutlined style={{ color: '#666' }} />
              <Text>
                {member.last_login_at
                  ? formatDate(new Date(member.last_login_at * 1000))
                  : '从未登录'}
              </Text>
            </Space>
          </Descriptions.Item>
        </Descriptions>

        {/* 权限信息 */}
        {member.permissions && member.permissions.length > 0 && (
          <>
            <Divider />
            <Title level={5}>权限列表</Title>
            <div style={{ marginTop: 8 }}>
              <Space wrap>
                {member.permissions.map((permission, index) => (
                  <Tag key={index} color="geekblue">
                    {permission}
                  </Tag>
                ))}
              </Space>
            </div>
          </>
        )}
      </div>
    </Modal>
  );
}